<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>message board</title>
    <script type="text/javascript">
        window.onload=function () {
            document.getElementById("save").onclick=function () {
                var data=document.getElementById("message").value;
                var time=new Date().getTime();
                localStorage.setItem(time,data);
                loadstorage("msg");
            }
            document.getElementById("clear").onclick=function () {
                localStorage.clear();
                loadstorage("msg");
            }
            document.getElementById("read").onclick=function () {
                loadstorage("msg");
            }
        }
        function loadstorage(id) {
            var result="";
            for (icv=0;icv<localStorage.length;icv++){
                var value=localStorage.getItem(localStorage.key(icv));
                var odate=new Date();
                var date=odate.toGMTString();
                result+="<span>这是第"+icv+"条留言</span>"+"<strong>"+  value  +"</strong>"+date+"<br>";
            }
            var target=document.getElementById(id);
            target.innerHTML=result;
        }
    </script>
</head>
<body>
<h1>简单留言板</h1>
<textarea id="message" cols="60" rows="10"></textarea><br>
<input type="button" value="保存" id="save">
<input type="button" value="清除" id="clear">
<input type="button" value="读取" id="read">
<p id="msg"></p>
</body>
</html>